import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Button, Row, Col, Card, Typography, Space, Statistic } from 'antd';
import { 
  RocketOutlined, 
  CloudOutlined, 
  SafetyCertificateOutlined,
  BarChartOutlined,
  CustomerServiceOutlined,
  CheckCircleOutlined,
  ArrowRightOutlined
} from '@ant-design/icons';

const { Title, Text, Paragraph } = Typography;

const HomePage: React.FC = () => {
  const navigate = useNavigate();

  const features = [
    {
      icon: <CloudOutlined style={{ fontSize: '48px', color: '#1890ff' }} />,
      title: '云端部署',
      description: '一键部署到云端，支持多云平台，弹性扩容，高可用架构'
    },
    {
      icon: <SafetyCertificateOutlined style={{ fontSize: '48px', color: '#52c41a' }} />,
      title: '安全可靠',
      description: '企业级安全防护，数据加密存储，完善的权限管理体系'
    },
    {
      icon: <BarChartOutlined style={{ fontSize: '48px', color: '#722ed1' }} />,
      title: '智能监控',
      description: '实时监控系统状态，智能告警，性能分析，预测性维护'
    },
    {
      icon: <CustomerServiceOutlined style={{ fontSize: '48px', color: '#fa8c16' }} />,
      title: '专业支持',
      description: '7x24小时技术支持，专业运维团队，快速响应解决问题'
    }
  ];

  const stats = [
    { title: '10,000+', subtitle: '企业用户', suffix: '' },
    { title: '99.9%', subtitle: '服务可用性', suffix: '' },
    { title: '24/7', subtitle: '技术支持', suffix: '' }
  ];

  return (
    <div style={{ minHeight: '100vh', background: '#fff' }}>
      {/* 顶部导航栏 */}
      <header style={{ 
        background: '#fff',
        borderBottom: '1px solid #f0f0f0',
        padding: '0 24px',
        position: 'sticky',
        top: 0,
        zIndex: 100
      }}>
        <div style={{ 
          maxWidth: '1200px', 
          margin: '0 auto',
          display: 'flex', 
          justifyContent: 'space-between', 
          alignItems: 'center',
          height: '64px'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <RocketOutlined style={{ fontSize: '24px', color: '#1890ff' }} />
            <Title level={3} style={{ margin: 0, color: '#1890ff' }}>
              星链saas运维系统
            </Title>
          </div>
          
          <nav style={{ display: 'flex', alignItems: 'center', gap: '32px' }}>
            <Link to="#features" style={{ color: '#666', textDecoration: 'none' }}>
              功能特色
            </Link>
            <Link to="#pricing" style={{ color: '#666', textDecoration: 'none' }}>
              价格方案
            </Link>
            <Link to="#contact" style={{ color: '#666', textDecoration: 'none' }}>
              联系我们
            </Link>
            <Button 
              type="primary" 
              onClick={() => navigate('/login')}
              style={{ 
                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                border: 'none',
                borderRadius: '6px'
              }}
            >
              登录
            </Button>
          </nav>
        </div>
      </header>

      {/* 主要内容区域 */}
      <main>
        {/* Hero Section */}
        <section style={{ 
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          color: 'white',
          padding: '80px 24px',
          position: 'relative',
          overflow: 'hidden'
        }}>
          {/* 背景装饰 */}
          <div style={{ position: 'absolute', width: '100%', height: '100%', top: 0, left: 0 }}>
            {[...Array(8)].map((_, i) => (
              <div
                key={i}
                style={{
                  position: 'absolute',
                  width: `${100 + i * 30}px`,
                  height: `${100 + i * 30}px`,
                  backgroundColor: 'rgba(255, 255, 255, 0.08)',
                  borderRadius: '12px',
                  transform: `rotate(${i * 20}deg)`,
                  top: `${10 + i * 8}%`,
                  left: `${80 + i * 5}%`,
                  animation: `float ${4 + i * 0.5}s ease-in-out infinite alternate`
                }}
              />
            ))}
          </div>

          <div style={{ maxWidth: '1200px', margin: '0 auto', position: 'relative', zIndex: 2 }}>
            <Row gutter={[48, 48]} align="middle">
              <Col xs={24} lg={12}>
                <div>
                  <Title level={1} style={{ 
                    color: 'white', 
                    fontSize: '48px', 
                    fontWeight: 'bold',
                    marginBottom: '16px',
                    lineHeight: 1.2
                  }}>
                    下一代智能运维平台
                  </Title>
                  <Title level={2} style={{ 
                    color: '#ffd700', 
                    fontSize: '32px',
                    marginBottom: '24px',
                    fontWeight: 'normal'
                  }}>
                    让服务器管理更简单
                  </Title>
                  
                  <Paragraph style={{ 
                    fontSize: '18px', 
                    color: 'rgba(255, 255, 255, 0.9)',
                    marginBottom: '40px',
                    lineHeight: 1.6
                  }}>
                    集服务器监控、性能分析、智能告警于一体的专业SaaS平台。帮助企业实现高效运维管理，降低运维成本，提升业务稳定性。
                  </Paragraph>

                  <Space size="large">
                    <Button 
                      size="large" 
                      style={{ 
                        background: 'rgba(255, 255, 255, 0.2)',
                        border: '1px solid rgba(255, 255, 255, 0.3)',
                        color: 'white',
                        borderRadius: '8px',
                        padding: '8px 32px',
                        height: 'auto',
                        backdropFilter: 'blur(10px)'
                      }}
                      onClick={() => navigate('/register')}
                    >
                      免费试用 30 天
                    </Button>
                    <Button 
                      size="large" 
                      type="text"
                      style={{ 
                        color: 'white',
                        border: '1px solid rgba(255, 255, 255, 0.3)',
                        borderRadius: '8px',
                        padding: '8px 32px',
                        height: 'auto'
                      }}
                    >
                      观看演示
                    </Button>
                  </Space>
                </div>
              </Col>
              
              <Col xs={24} lg={12}>
                {/* 右侧监控面板模拟 */}
                <div style={{
                  background: 'rgba(255, 255, 255, 0.95)',
                  borderRadius: '16px',
                  padding: '24px',
                  backdropFilter: 'blur(10px)',
                  boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)'
                }}>
                  <div style={{ 
                    display: 'flex', 
                    justifyContent: 'space-between', 
                    alignItems: 'center',
                    marginBottom: '24px'
                  }}>
                    <div style={{ display: 'flex', gap: '8px' }}>
                      <div style={{ width: '12px', height: '12px', borderRadius: '50%', background: '#ff5f56' }} />
                      <div style={{ width: '12px', height: '12px', borderRadius: '50%', background: '#ffbd2e' }} />
                      <div style={{ width: '12px', height: '12px', borderRadius: '50%', background: '#27ca3f' }} />
                    </div>
                    <Text style={{ color: '#666', fontSize: '14px' }}>运维控制台</Text>
                  </div>

                  <Row gutter={[16, 16]}>
                    <Col span={8}>
                      <div style={{ textAlign: 'center' }}>
                        <Text style={{ color: '#999', fontSize: '12px', display: 'block' }}>
                          服务器状态
                        </Text>
                        <Text style={{ 
                          color: '#52c41a', 
                          fontSize: '18px', 
                          fontWeight: 'bold',
                          display: 'block'
                        }}>
                          正常运行
                        </Text>
                      </div>
                    </Col>
                    <Col span={8}>
                      <div style={{ textAlign: 'center' }}>
                        <Text style={{ color: '#999', fontSize: '12px', display: 'block' }}>
                          CPU使用率
                        </Text>
                        <Text style={{ 
                          color: '#1890ff', 
                          fontSize: '24px', 
                          fontWeight: 'bold',
                          display: 'block'
                        }}>
                          45%
                        </Text>
                      </div>
                    </Col>
                    <Col span={8}>
                      <div style={{ textAlign: 'center' }}>
                        <Text style={{ color: '#999', fontSize: '12px', display: 'block' }}>
                          内存使用
                        </Text>
                        <Text style={{ 
                          color: '#722ed1', 
                          fontSize: '24px', 
                          fontWeight: 'bold',
                          display: 'block'
                        }}>
                          68%
                        </Text>
                      </div>
                    </Col>
                  </Row>

                  {/* 模拟图表 */}
                  <div style={{ 
                    height: '120px', 
                    background: '#f8f9fa',
                    borderRadius: '8px',
                    marginTop: '20px',
                    display: 'flex',
                    alignItems: 'end',
                    justifyContent: 'center',
                    gap: '4px',
                    padding: '16px'
                  }}>
                    {[65, 78, 52, 85, 72, 95, 68, 82].map((height, i) => (
                      <div
                        key={i}
                        style={{
                          width: '16px',
                          height: `${height}%`,
                          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                          borderRadius: '2px'
                        }}
                      />
                    ))}
                  </div>
                </div>
              </Col>
            </Row>

            {/* 统计数据 */}
            <Row gutter={[48, 24]} style={{ marginTop: '80px' }}>
              {stats.map((stat, index) => (
                <Col xs={8} key={index}>
                  <div style={{ textAlign: 'center' }}>
                    <Title level={2} style={{ 
                      color: '#ffd700', 
                      fontSize: '36px',
                      marginBottom: '8px',
                      fontWeight: 'bold'
                    }}>
                      {stat.title}
                    </Title>
                    <Text style={{ 
                      color: 'rgba(255, 255, 255, 0.8)', 
                      fontSize: '16px'
                    }}>
                      {stat.subtitle}
                    </Text>
                  </div>
                </Col>
              ))}
            </Row>
          </div>
        </section>

        {/* 功能特色 */}
        <section id="features" style={{ padding: '80px 24px', background: '#fafafa' }}>
          <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
            <div style={{ textAlign: 'center', marginBottom: '64px' }}>
              <Title level={2} style={{ fontSize: '36px', marginBottom: '16px' }}>
                功能特色
              </Title>
              <Text style={{ fontSize: '18px', color: '#666' }}>
                专业的运维管理功能，让您的业务更稳定
              </Text>
            </div>

            <Row gutter={[32, 32]}>
              {features.map((feature, index) => (
                <Col xs={24} sm={12} lg={6} key={index}>
                  <Card
                    style={{ 
                      height: '100%',
                      textAlign: 'center',
                      border: 'none',
                      borderRadius: '12px',
                      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)'
                    }}
                    bodyStyle={{ padding: '32px 24px' }}
                  >
                    <div style={{ marginBottom: '24px' }}>
                      {feature.icon}
                    </div>
                    <Title level={4} style={{ marginBottom: '16px' }}>
                      {feature.title}
                    </Title>
                    <Text style={{ color: '#666', lineHeight: 1.6 }}>
                      {feature.description}
                    </Text>
                  </Card>
                </Col>
              ))}
            </Row>
          </div>
        </section>

        {/* CTA Section */}
        <section style={{ 
          padding: '80px 24px',
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          color: 'white'
        }}>
          <div style={{ maxWidth: '800px', margin: '0 auto', textAlign: 'center' }}>
            <Title level={2} style={{ 
              color: 'white', 
              fontSize: '36px',
              marginBottom: '24px'
            }}>
              准备开始了吗？
            </Title>
            <Paragraph style={{ 
              fontSize: '18px',
              color: 'rgba(255, 255, 255, 0.9)',
              marginBottom: '40px'
            }}>
              立即注册，免费试用30天，体验专业的运维管理服务
            </Paragraph>
            <Space size="large">
              <Button 
                size="large"
                style={{ 
                  background: 'white',
                  color: '#667eea',
                  border: 'none',
                  borderRadius: '8px',
                  padding: '12px 32px',
                  height: 'auto',
                  fontWeight: 500
                }}
                onClick={() => navigate('/register')}
              >
                免费开始 <ArrowRightOutlined />
              </Button>
              <Button 
                size="large"
                type="text"
                style={{ 
                  color: 'white',
                  border: '1px solid rgba(255, 255, 255, 0.3)',
                  borderRadius: '8px',
                  padding: '12px 32px',
                  height: 'auto'
                }}
              >
                联系销售
              </Button>
            </Space>
          </div>
        </section>
      </main>

      {/* 页脚 */}
      <footer style={{ 
        background: '#001529',
        color: 'white',
        padding: '48px 24px 24px'
      }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
          <Row gutter={[48, 32]}>
            <Col xs={24} md={8}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '16px' }}>
                <RocketOutlined style={{ fontSize: '24px', color: '#1890ff' }} />
                <Title level={4} style={{ color: 'white', margin: 0 }}>
                  星链saas运维系统
                </Title>
              </div>
              <Text style={{ color: 'rgba(255, 255, 255, 0.7)' }}>
                专业的云端运维管理平台，让服务器管理更简单高效。
              </Text>
            </Col>
            <Col xs={12} md={4}>
              <Title level={5} style={{ color: 'white', marginBottom: '16px' }}>
                产品
              </Title>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                <Link to="#" style={{ color: 'rgba(255, 255, 255, 0.7)', textDecoration: 'none' }}>功能特色</Link>
                <Link to="#" style={{ color: 'rgba(255, 255, 255, 0.7)', textDecoration: 'none' }}>价格方案</Link>
                <Link to="#" style={{ color: 'rgba(255, 255, 255, 0.7)', textDecoration: 'none' }}>API文档</Link>
              </div>
            </Col>
            <Col xs={12} md={4}>
              <Title level={5} style={{ color: 'white', marginBottom: '16px' }}>
                支持
              </Title>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                <Link to="#" style={{ color: 'rgba(255, 255, 255, 0.7)', textDecoration: 'none' }}>帮助中心</Link>
                <Link to="#" style={{ color: 'rgba(255, 255, 255, 0.7)', textDecoration: 'none' }}>联系我们</Link>
                <Link to="#" style={{ color: 'rgba(255, 255, 255, 0.7)', textDecoration: 'none' }}>技术支持</Link>
              </div>
            </Col>
            <Col xs={24} md={8}>
              <Title level={5} style={{ color: 'white', marginBottom: '16px' }}>
                联系我们
              </Title>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                <Text style={{ color: 'rgba(255, 255, 255, 0.7)' }}>
                  📧 support@saas-platform.com
                </Text>
                <Text style={{ color: 'rgba(255, 255, 255, 0.7)' }}>
                  📞 400-123-4567
                </Text>
                <Text style={{ color: 'rgba(255, 255, 255, 0.7)' }}>
                  🌐 www.saas-platform.com
                </Text>
              </div>
            </Col>
          </Row>
          
          <div style={{ 
            borderTop: '1px solid rgba(255, 255, 255, 0.1)',
            marginTop: '32px',
            paddingTop: '24px',
            textAlign: 'center'
          }}>
                            <Text style={{ color: 'rgba(255, 255, 255, 0.5)' }}>
                  © 2024 星链saas运维系统. All rights reserved.
                </Text>
          </div>
        </div>
      </footer>

      {/* CSS动画 */}
      <style>
        {`
          @keyframes float {
            0% { transform: translateY(0px) rotate(0deg); }
            100% { transform: translateY(-10px) rotate(5deg); }
          }
        `}
      </style>
    </div>
  );
};

export default HomePage; 